{% extends "base.html" %}
{% block title %}评分{% endblock %}
{% block stylecontent %}
<link href="/static/css/styles.css" rel="stylesheet"/>
{% endblock %}
{% block content %}
<div class="container-fluid px-4">
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"></li>
    </ol>
    <h5 class="mt-2">电影类型选择</h5>
    <div class="card mb-4">
        <div class="card-body" style="align-items: center">
            <div class="btn-group" role="group" aria-label="Basic example">
                {% if type == 'all' %}
                <a href="/rate_t/all" class="btn btn-secondary active">全部</a>
                {% else %}
                <a href="/rate_t/all" class="btn btn-secondary ">全部</a>
                {% endif %}
                {% for i in typeAll %}
                {% if type == i %}
                <a href="/rate_t/{{ i }}" class="active btn btn-secondary">{{ i }}</a>
                {% else %}
                <a href="/rate_t/{{ i }}" class="btn btn-secondary">{{ i }}</a>
                {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="card mb-4">
        <div class="card-header">
            <i class="fas fa-chart-area me-1"></i>
            电影评分统计
        </div>
        <div class="card-body">
            <div id="mainOne" style="width: 100%;height: 400px"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-chart-bar me-1"></i>
                    豆瓣评分星级饼状图
                </div>
                <div class="card-body">
                    <form style="margin-top: 15px" method="post" action="/rate_t/all" class="form-inline ">
                        <div class="form-group mx-sm-3 mb-2">
                            <label for="inputPassword2" class="sr-only"></label>
                            <input name="searchIpt" type="text" class="form-control" id="inputPassword2"
                                   placeholder="请输入电影名关键字">
                        </div>
                        <button type="submit" style="margin-left: 15px" class="btn btn-primary mb-2">搜索
                        </button>
                    </form>
                </div>
                <hr>
                <div class="card-body">
                    <div id="mainTwo" style="width: 100%;height: 330px;">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-chart-bar me-1"></i>
                    豆瓣年度评价评分柱状图
                </div>
                <div class="card-body">
                    <div id="mainThree" style="width: 100%;height: 500px;">
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-chart-bar me-1"></i>
                    豆瓣电影中外评分分布图
                </div>
                <div class="card-body">
                    <div id="mainFore" style="width:100%;height:500px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block scriptcontent %}
<script>
  //电影评分统计
  var chartDom = document.getElementById('mainOne')
  var myChart = echarts.init(chartDom)
  var option
  option = {
    //标题
    title: {
      text: '电影评分统计',
      left: 'center',
      textStyle: {
        color: '#67c62b',
        fontSize: 14,
      },
    },
    //提示框
    tooltip: {
      trigger: 'item',
      textStyle: {
        color: '#000',
      },
    },
    //图例
    legend: {
      //type:'scroll',
      orient: 'vertical',
      right: 'right',
    },
    //横轴信息
    xAxis: {
      type: 'category',
      boundaryGap: false,
      name: '分数',
      nameLocation: 'center',
      nameGap: 30,
      data:{{  x | safe }}
    },
    //纵轴信息
    yAxis: {
      type: 'value',
      name: '数量',
      nameLocation: 'center',
      nameGap: 30,
    },
    //系列列表
    series: [
      {
        name: '数量',
        type: 'line',
        data:{{ y | safe }},
        areaStyle: {
          color: 'rgba(148,225,15,0.5)',
        },
        lineStyle: {
          color: 'rgba(102,113,15,0.5)',
        },
        itemStyle: {
          color: 'rgba(22,25,17,0.5)',
        },
        //动画效果
        animationDuration: 5000,
        animationEasing: 'bounceInOut',
      }],
  }
  option && myChart.setOption(option)
</script>
<script>
  // 豆瓣评分星级饼状图
  var chartDom = document.getElementById('mainTwo')
  var myChart = echarts.init(chartDom)
  var option
  //设置配置项
  option = {
    //标题
    title: {
      text: '{{ movieName }}-电影评分星级饼状图',
      left: 'center',
      textStyle: {
        color: '#67c62b',
        fontSize: 14,
      },
    },
    //提示框
    tooltip: {
      trigger: 'item',
      textStyle: {
        color: '#000',
      },
    },
    //图例
    legend: {
      //type:'scroll',
      orient: 'vertical',
      left: 'left',
      icon: 'triangle',
    },
    //系列列表
    series: [
      {
        name: '星级占比',
        type: 'pie',
        radius: ['30%', '70%'],
        data: {{ star |safe }},
        label: {
          show: true,
          formatter: '{b}:[{d}%]',
        },
        //动画效果
        animationDuration: 5000,
        animationEasing: 'elasticInOut',
      }],
  }
  option && myChart.setOption(option)
</script>
<script>
  //豆瓣年度评价评分柱状图
  var chartDom = document.getElementById('mainThree')
  var myChart = echarts.init(chartDom)
  var option
  option = {
    //标题
    title: {
      text: '豆瓣年度评价评分柱状图',
      left: 'center',
      textStyle: {
        color: '#67c62b',
        fontSize: 14,
      },
    },
    //提示框
    tooltip: {
      trigger: 'item',
      textStyle: {
        color: '#000',
      },
    },
    //图例
    legend: {
      //type:'scroll',
      orient: 'vertical',
      right: 'right',
    },
    //横轴信息
    xAxis: {
      type: 'category',
      name: '年份',
      nameLocation: 'center',
      nameGap: 30,
      data:{{  x1 | safe }}
      //data:{{  x1 | tojson }} 如果图表不显示，可以safe改为tojson
    },
    //纵轴信息
    yAxis: {
      type: 'value',
      name: '评分',
      nameLocation: 'center',
      nameGap: 30,
    },
    //缩放
    dataZoom:{
      type:'inside'
    },
    //系列列表
    series: [
      {
        name: '平均分',
        type: 'bar',
        data:{{ y1 | safe }},
        //data:{{ y1 | tojson }},
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(183,196,227,0.5)',
        },
        itemStyle: {
          color: 'rgba(81,117,22,0.5)',
        },
        //动画效果
        animationDuration: 5000,
        animationEasing: 'bounceInOut',
      }],
  }
  option && myChart.setOption(option)
</script>
<script>
  //豆瓣电影中外评分分布图
  var chartDom = document.getElementById('mainFore')
  var myChart = echarts.init(chartDom)
  var option = {
    //标题
    title: {
      text: '',
      left: 'center',
    },
    //图例
    legend: {
      data: ['电影数量', '评价分数'],
    },
    //提示框
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
    },
    //横轴信息
    xAxis: {
      name: '地点',
      type: 'category',
      data:{{ x2 | safe }},
      nameLocation: 'center',
      nameGap: 30,
    },
    //纵轴信息
    yAxis: [
      //左侧
      {
        name: '电影数量',
        type: 'value',
        min: 0,
        max: 250,
        nameLocation: 'center',
        nameGap: 30,
      },
      //右侧
      {
        name: '评价分数',
        type: 'value',
        min: 0,
        max: 10,
        nameLocation: 'center',
        nameGap: 30,
      },
    ],
    //工具栏
    toolbox: {
      feature: {
        dataView: {},
        restore: {},
        saveAsImage: {},
        magicType: { type: ['line', 'bar'] },
      },
      orient:'vertical'
    },

    series: [
      //左侧Y轴，电影数量，柱状图
      {
        name: '电影数量',
        type: 'bar',
        data:{{ y2 | safe }},
        itemStyle: {
          color: 'rgba(67,200,38,0.5)',
        },
        animationDuration: 5000,
        animationEasing: 'bounceIn',
      },
      //右侧Y轴，电影平均分，折线图
      {
        name: '评价分数',
        type: 'line',
        data:{{ y22 | safe }},
        yAxisIndex: 1,
        lineStyle: {
          color: 'rgba(23,29,158,0.6)',
        },
        itemStyle: {
          color: '#260aa5',
        },
        animationDuration: 5000,
        animationEasing: 'bounceInOut',
      }],
  }
  option && myChart.setOption(option)
</script>
{% endblock %}
